import  './channel.css';
import { Row,Col } from 'antd';
import React, { useState,useEffect } from 'react';
import axios from '../global/axios';
import api from '../global/api';
const Channel = () => {
  let _channel = {channel:'channel'};
  const [ header, setHeader ] = useState('');
  const [ card, setCard ] = useState([]);
  useEffect(()=>{
		const getChannelData = async () => {
      const _res = await axios.get(api.getChannel,{params:_channel});
      const pageData = _res.data.pageData;
      setHeader(pageData.header.resContent);
      setCard(pageData.card);
    }      
    getChannelData();
  },[]) 
  return(
    <div className="home">
      <div className="jumbotronc">
        <div className="wh" dangerouslySetInnerHTML={{__html:header}}></div>
        <div className="lang">
          <div className="lang_2"></div>
        </div>    
      </div>
      <div className="w" style={{marginBottom:'20px'}}>
        <Row gutter={12}>
          {
            card.map(item => {
              return(
                <Col key={item.id} xs={24} sm={24} md={12} lg={6} xl={6}>
                  <div className="thumbnail">
                    <img src={api.host+item.resUrl} />
                    <div className="caption" dangerouslySetInnerHTML={{__html:item.resContent}}></div>
                  </div>  
                </Col>
              )
            })
          }
        </Row>
      </div>
    </div>
  )
}
export default Channel;